<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
        <el-steps :active="2" process-status="wait" align-center style="marginbottom:
                    40px;">
            <el-step title="填写课程基本信息" icon="el-icon-edit"></el-step>
            <el-step title="创建课程大纲" icon="el-icon-upload"></el-step>
            <el-step title="最终发布" icon="el-icon-picture"></el-step>
        </el-steps>
      <!-- <ul v-for="chapter in chapterVideoList" :key="chapter.id" >
         <li>{{chapter.title}}
            <ul v-for=" video in chapter.children"  :key="video.id">
               <li>{{video.title}}</li>
            </ul>
         </li>
      </ul> -->
      <!-- 添加章节按钮 -->
   <el-button type="text" @click="openChapterDialog()">添加章节</el-button>
     <!-- 添加和修改章节表单弹框 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
        <el-form :model="chapter" label-width="120px">
            <el-form-item label="章节标题">
            <el-input v-model="chapter.title"/>
            </el-form-item>

            <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controlsPosition="
            right"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdateChapter">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 添加和修改小节以及视频的弹框 -->
      <!-- 添加和修改课时表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
        <el-form :model="video" label-width="120px">
            <el-form-item label="课时标题">
                <el-input v-model="video.title"/>
            </el-form-item>
            <el-form-item label="课时排序">
                <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
            </el-form-item>
            <el-form-item label="是否免费">
                <el-radio-group v-model="video.free">
                    <el-radio :label="true">免费</el-radio>
                    <el-radio :label="false">默认</el-radio>
                </el-radio-group>
            </el-form-item>
<!-- 章节和小节的遍历显示 -->
               <el-form-item label="上传视频">
                   <!-- on-success上传成功，on-remove删除，before-remove删除之前，on-exceed 上传之前的设置，file-list上传列表-->
                <el-upload
                
                    :on-success="handleVodUploadSuccess"  
                    :on-remove="handleVodRemove"
                    :before-remove="beforeVodRemove"
                    :on-exceed="handleUploadExceed"
                    :file-list="fileList"
                    :action="BASE_API+'/eduvod/video/uploadAlyiVideo'"
                    :limit="1"
                    class="upload-demo">
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                    <div slot="content">最大支持1G，<br>
                        支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                        GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                        MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                        SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                    <i class="el-icon-question"/>
                </el-tooltip>
                </el-upload>    
            </el-form-item> 
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
            <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
    </el-dialog>


    <!-- 章节和小节的遍历显示 -->
    <ul class="chanpterList">
        <li
            v-for="chapter in chapterVideoList"
            :key="chapter.id">
            <p>
                {{ chapter.title }}

                 <span class="acts">
                    <el-button style="" type="text" @click="openVideo(chapter.id)">添加小节</el-button>
                    <el-button style="" type="text" @click="openEditChatper(chapter.id)">编辑</el-button>
                    <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
                </span>
            </p>

            <!-- 视频 -->
            <ul class="chanpterList videoList">
                <li
                    v-for="video in chapter.children"
                    :key="video.id">
                    <p>{{ video.title }}
                <!--删除和修改按钮 -->
                <span class="acts">
                    
                    <el-button style="" type="text"  @click="openEdiVideo(video.id)">编辑</el-button>
                    <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                </span>
                    </p>
                </li>
            </ul>
        </li>
    </ul>
    <div>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
    </div>
      <!-- <el-form label-width="120px"  id="01f" >
        <el-form-item text-align: center>
            <el-button @click="previous">上一步</el-button>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下
            一步</el-button>
        </el-form-item>
       </el-form>
       -->
   </div> 
</template>

<script>
import chapter from '@/api/edu/chapter.js'
   export default {
     data() {
        return {
            saveBtnDisabled: false ,// 保存按钮是否禁用
            courseId:'', //课程ID
            chapterVideoList:[], //章节可小节的集合
            dialogChapterFormVisible: false, //是否显示章节表单弹框
            dialogVideoFormVisible: false,//是否显示小节表单弹框
            saveVideoBtnDisabled:false, //使小节提交的确定按钮失效


            chapter:{ //封装章节数据
                title:'',
                sort:0,
                courseId:'',
            },
            chapterId: '', // 课时所在的章节id
            video: {  // 课时对象
            courseId:'',
            title: '',
            sort: 0,
            free: 0,
            videoSourceId: '',
            videoOriginalName:''
                    },
            fileList: [],//上传文件列表
            BASE_API: process.env.BASE_API // 接口API地址

              }
        },
     created() {
        //获取当前路由也就是访问路径上面的参数 ID ，因为在路由里面定义了新增、编辑、发布页面都带了课程id，所以直接取就行了
        if(this.$route.params && this.$route.params.id ){
            this.courseId  = this.$route.params.id
        }
        this.getChapterVideo()
        
               },
     methods: {
     //=====================小节管理======================
     //1、添加小节弹框
     openVideo(chapterId){

           this.dialogVideoFormVisible = true//弹框显示
           this.video={}  //清空添加弹框的数据
           this.video.chapterId  = chapterId //获取当前的章节ID 需要绑定小节
            //把文件列表清空及视频ID等清空
                this.fileList = []
                this.video.videoSourceId = ''
                this.video.videoOriginalName=''

     },
     //2、添加或者修改小节
     saveOrUpdateVideo(){
         if(this.video.id){
             this.UpdateVideo()
         }else{
            this.saveVideo();
         }
      
     },
     //2、1小节添加
       saveVideo(){
              
              this.video.courseId = this.courseId        
            //   console.log("====courseId==="+this.video.courseId+  "------chapterId----"+this.video.chapterId )
            //   console.log(this.video)
              chapter.addEduVideo(this.video)
                  .then(response=>{
                        this.$message({   
                        type: 'success',
                        message: '添加章节成功!'
                                     })
                       this.dialogVideoFormVisible = false
                       //根据课程id查询章节和小节列表
                        this.getChapterVideo() 
                                 })
                  }, 
       //2、1小节修改
         UpdateVideo(){
             this.video.courseId = this.courseId        
              chapter.updateEduVideo(this.video)
                  .then(response=>{
                        this.$message({   
                        type: 'success',
                        message: '修改章节成功!'
                                     })
                       this.dialogVideoFormVisible = false
                       //根据课程id查询章节和小节列表
                        this.getChapterVideo() 
                                 })
              
         }, 
        //2、2小节修改回显数据及弹框
         openEdiVideo(videoId){
         this.dialogVideoFormVisible = true
         chapter.getEduVideoById(videoId)
             .then(response=>{
               this.video =  response.data.eduVideo

              //修改的时候获取上传视频的列表字段值，用于删除的时候提供参数值
              console.log("response.data.videoOriginalName",response.data.videoOriginalName)
                this.fileList.push ({name: response.data.eduVideo.videoOriginalName})
                this.video.videoSourceId = response.data.eduVideo.videoSourceId
                this.video.videoOriginalName = response.data.eduVideo.videoOriginalName
               
             })         
         },
         //3、删除小节
         removeVideo(videoId){
             
         this.$confirm('此操作将永久删除该小节, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
                })
          .then(() => {

              chapter.deleteEduVideoById(videoId)
               .then(response=>{
                    this.$message({   
                    type: 'success',
                    message: '删除小节成功!'
                              })

                //根据课程id查询章节和小节列表
                 this.getChapterVideo() 
                })

           })
             


         },
         //4、上传视频成功后调用
         handleVodUploadSuccess(response, file, fileList){
            
         //上传视频ID赋值
          this.video.videoSourceId = response.data.VideoId
          //上传视频名称赋值
          this.video.videoOriginalName = file.name
         },
         //4.1点击删除视频那个x后执行的方法
         handleVodRemove(){
             //调用接口删除阿里云视频方法
           chapter.deleteAliYunVideoById(this.video.videoSourceId)
           .then(response=>{
               this.$message({   
                    type: 'success',
                    message: '删除视频成功!'
                           })
               //把文件列表清空及视频ID等清空
                this.fileList = []
                this.video.videoSourceId = ''
                this.video.videoOriginalName=''

           })
         },
        //点击x删除视频之前执行的方法
         beforeVodRemove(file, fileList){
         return this.$confirm(`确定移除 ${ file.name }？`)
         },
         //上传视频之前的设置方法
         handleUploadExceed(){

         },

    //=====================章节管理=======================    
        //1、弹出添加章节页面
         openChapterDialog(){    
         this.dialogChapterFormVisible =true //弹框
         //清空弹框表单值
         this.chapter.title =''
         this.chapter.sort =''
         }, 
         //2、判断是添加还是修改 章节  
         saveOrUpdateChapter(){
             if(!this.chapter.id){
                this.addChapter()//添加章节
             }else{
                 this.updateChapter()//修改章节
             }           
         },
        
         //2.1添加章节
         addChapter(){
              
              this.chapter.courseId = this.courseId
             chapter.addChapter(this.chapter)
             .then(response=>{
                 this.dialogChapterFormVisible =false
                 this.$message({   
                    type: 'success',
                    message: '添加章节成功!'
                              })
                 //根据课程id查询章节和小节列表
                 this.getChapterVideo()             
             })
         }, 
         //2.2修改章节（数据回显）
         openEditChatper(id){
             this.dialogChapterFormVisible =true
              chapter.getChapterInfo(id)
              .then(response=>{
                  this.chapter = response.data.chapter
              })
              
         },
         //2.3修改章节 （提交保存）
         updateChapter(){
             this.chapter.courseId = this.courseId
             chapter.updateChapter(this.chapter)
             .then(response=>{
                 this.dialogChapterFormVisible =false
                 this.$message({   
                    type: 'success',
                    message: '修改章节成功!'
                              })

                 this.chapter.id =''
                 //根据课程id查询章节和小节列表
                 this.getChapterVideo()               
         })
         },
        //删除章节
         removeChapter(chapterId){
           this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
                })
          .then(() => { 
            chapter.deleteChapter(chapterId)
             .then(reponse=>{
                
                 this.$message({   
                    type: 'success',
                    message: '删除章节成功!'
                              })
                //修改或者删除后会给chapterId赋值，影响提交表单的是否有chapterId 来进行新增或者修改的判断，所以每次完成后清空下
                //  this.chapter.id =''
                 //根据课程id查询章节和小节列表
                 this.getChapterVideo()                            
             })
                  })
          
                  
         },

       //4、根据课程id查询章节和小节列表       
        getChapterVideo(){
         chapter.getAllChapterVideo(this.courseId)
         .then(reponse=>{
               this.chapterVideoList  =  reponse.data.list
         })  
        },
        previous() {
       //跳转到上一步
        this.$router.push({ path: '/course/info/'+this.courseId })
              },
        next() {
        //跳转到下一步
        this.$router.push({ path: '/course/publish/'+this.courseId  })              
               }
                                          
  }
}
// <style>
// .el-form-item{
  
//   text-align: center;
//   padding-right:30px;
// }
// </style>
</script>
<style scoped>
.el-form-item{
  
   text-align: center;
   padding-right:30px;
 }
.chanpterList{
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.chanpterList li{position: relative;
}
.chanpterList p{
float: left;
font-size: 20px;
margin: 10px 0;
padding: 10px;
height: 70px;
line-height: 50px;
width: 100%;
border: 1px solid #DDD;
}
.chanpterList .acts {
float: right;
font-size: 14px;
}
.videoList{
padding-left: 50px;
}
.videoList p{
float: left;
font-size: 14px;
margin: 10px 0;
padding: 10px;
height: 50px;
line-height: 30px;
width: 100%;
border: 1px dotted #DDD;
}
</style>